<!-- 树形结构 -->
<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="visible"
    width="50%"
    :before-close="closeDialog"
  >
    <el-tree
      ref="tree"
      node-key="id"
      :data="resourceTree"
      show-checkbox
      class="tree"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button v-if="type === 'ASSIGN'" type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'BossSoftTree',
  props: {
    visible: {
      require: true,
      type: Boolean,
      default: false
    },
    title: {
      require: true,
      type: String,
      default: ''
    },
    type: {
      require: true,
      type: String, // VIEW 观看 ASSIGN 分配
      default: 'VIEW'
    },
    data: {
      require: true,
      type: Array,
      default: () => []
    },
    dataChosen: {
      require: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      resourceTree: []
    }
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        let primaryNode = []
        let secondaryNode = []
        let tertiaryNode = []

        // 建立一级结点表
        newVal.map((node) => {
          if (parseInt(node.parentId) === -1 && node.resourceType === 2) {
            primaryNode.push({
              label: node.name,
              id: node.id,
              children: [],
              disabled: this.type === 'VIEW'
            })
          }
        })
        // 建立二级结点表
        primaryNode.map((parentNode) => {
          newVal.map((node) => {
            if (parentNode.id === node.parentId) {
              secondaryNode.push({
                name: node.name,
                id: node.id,
                children: [],
                parentId: node.parentId
              })
            }
          })
        })
        // 建立三级结点表
        secondaryNode.map((parentNode) => {
          newVal.map((node) => {
            if (parentNode.id === node.parentId) {
              tertiaryNode.push({
                name: node.name,
                id: node.id,
                children: [],
                parentId: node.parentId
              })
            }
          })
        })
        // 将四级结点储存至三级结点中
        tertiaryNode.map((parentNode) => {
          newVal.map((node) => {
            if (parentNode.id === node.parentId) {
              parentNode.children.push({
                label: node.name,
                id: node.id,
                children: [],
                disabled: this.type === 'VIEW'
              })
            }
          })
        })
        // 将三级结点储存至二级结点中
        secondaryNode.map((parentNode) => {
          tertiaryNode.map((node) => {
            if (parentNode.id === node.parentId) {
              parentNode.children.push({
                label: node.name,
                id: node.id,
                children: node.children,
                disabled: this.type === 'VIEW'
              })
            }
          })
        })
        // 将二级结点储存至一级结点中
        primaryNode.map((parentNode) => {
          secondaryNode.map((node) => {
            if (parentNode.id === node.parentId) {
              parentNode.children.push({
                label: node.name,
                id: node.id,
                children: node.children,
                disabled: this.type === 'VIEW'
              })
            }
          })
        })
        this.resourceTree = primaryNode
      },
      deep: true
    },
    dataChosen: {
      handler() {
        this.$nextTick(() => {
          this.dataChosen.map(item => {
            this.$refs.tree.setChecked(item.id, true)
          })
        })
      },
      deep: true
    }
  },
  methods: {
    confirm() {
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      const halfCheckedNode = this.$refs.tree.getHalfCheckedNodes()
      this.$emit('confirm', [checkedNodes, halfCheckedNode])
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.tree {
  height: 400px;
  overflow: auto;
}
</style>
